import React, { useState } from 'react'
import styles from './index.module.css'
import { Icon } from 'react-vant'
import { useNavigate, Link } from 'react-router-dom'
import { Tabs, Popup, Cell, Button, Grid } from 'react-vant'
import { getUserChannels, getAllChannels, setMyChannels, deleteMyChannels } from '../../api/article'
import List from './list/index'
import { getChannels, setChannels, getToken } from '../../utils/index'
const whiteList = ['推荐', 'html']
export default class Home extends React.Component {
    state = {
        active: 0,
        channels: [],
        allChannels: [],
        isShow: false,
        list: [],
        isEidt: false,
        token: getToken()
    }
    render() {
        return <div className={styles.home}>
            {/* 头部区域 */}
            <div className={styles.header}>
                <Link to="/search">
                    <button className={styles.boxing} >
                        <Icon name="search" />
                        搜索
            </button>
                </Link>
            </div>
            {/* 导航栏区域 */}
            <div className={styles.tab}>
                <Tabs active={this.state.active} onClickTab={({ name }) => {
                    this.setState(() => { return this.setState({ active: name }) })
                }}>
                    {this.renderTabpane()}
                </Tabs>
                <div onClick={() => {
                    this.setState({
                        isShow: true
                    })
                }} className={styles.hamburger}><Icon name="wap-nav" /></div>
            </div>
            {/* 弹出层区域 */}
            <Popup
                round
                closeable
                closeIconPosition="top-left"
                position="bottom"
                style={{ height: '100%' }}
                visible={this.state.isShow}
                onClose={() => { this.colsePopup() }}>
                <Cell title="我的频道">
                    {this.state.isEidt ?
                        <Button size="small" plain round hairline type="danger" onClick={() => { this.setState({ isEidt: false }) }}>完成</Button> :
                        <Button plain hairline size="small" round type="danger" onClick={() => { this.setState({ isEidt: true }) }}>编辑</Button>}
                </Cell>
                <div className="selected">{this.renderSelected()}</div>
                <div className="unSelected">
                    <Cell title="推荐频道">
                    </Cell>
                    {this.unRenderSelected()}</div>
            </Popup>
        </div >
    }
    async  componentDidMount() {
        if (this.state.token) {
            const { data } = await getUserChannels()
            await this.setState(() => { return { channels: data.data.channels } })

        } else {
            if (getChannels()) {
                this.setState({
                    channels: getChannels()
                })
            } else {
                const { data } = await getUserChannels()
                setChannels(data.data.channels)
                await this.setState(() => { return { channels: data.data.channels } })
            }
        }
        const res = await getAllChannels()
        await this.setState(() => { return { allChannels: res.data.data.channels } })
        const list = this.state.allChannels.filter(item => {
            let result = false
            this.state.channels.forEach(value => {
                if (value.name === item.name)
                    result = true
            })
            return !result
        })
        this.setState(() => { return { list } })
    }
    shouldComponentUpdate(nextporps, nextState) {
        if (nextState.channels.length !== this.state.channels.length) {
            const list = this.state.allChannels.filter(item => {
                let result = false
                nextState.channels.forEach(value => {
                    if (value.name === item.name)
                        result = true
                })
                return !result
            })
            this.setState(() => { return { list } })
        }
        return true
    }
    // 渲染tab栏
    renderTabpane() {
        return this.state.channels.map(item => {
            return <Tabs.TabPane title={item.name} key={item.id}>
                <List id={item.id} /></Tabs.TabPane>
        })
    }
    colsePopup() {
        this.setState({ isShow: false })
    }
    // 渲染选择频道
    renderSelected() {
        return (<div className={styles.grid}>
            {this.state.channels.map((item, index) => {
                return <div onClick={() => this.onMyClick(index, item)}
                    key={item.id}
                    className={(index === this.state.active ? styles.activeIndex : '') + ' ' + (whiteList.some(white => { return item.name === white }) && this.state.isEidt ? styles.whiteList : '')}>
                    {item.name}
                    <div className={styles['van-icon-clear'] + ' ' + (this.state.isEidt ? '' : styles['hiddin']) + ' '
                        + (whiteList.some(white => { return item.name === white }) ? styles['hiddin'] : '')}>
                        <Icon className={styles.clear} name="clear" /></div>
                </div>
            })}
        </div>)
    }
    // 渲染未选择频道
    unRenderSelected() {
        return (<div className={styles.grid}>
            {this.state.list.map(item => { return <div onClick={() => { this.onRecommondClick(item) }} key={item.id}>+{item.name}</div> })}
        </div>)
    }
    // 删除频道
    async   onMyClick(index, item) {
        if (!this.state.isEidt) {
            this.setState({ isShow: false, active: index })
        } else {
            if (whiteList.some(white => { return item.name === white })) return
            const list = [...this.state.channels]
            list.splice(index, 1)
            if (index <= this.state.active) {
                this.setState(() => {
                    return {
                        active: this.state.active - 1
                    }
                })
            }
            // 没登录的情况
            if (!this.state.token) {
                setChannels(list)
            } else {
                //  登录的情况
                const res = await deleteMyChannels(item.id)
                console.log(res);
            }
            this.setState(() => {
                return {
                    channels: list
                }
            })
        }
    }
    // 添加频道
    async onRecommondClick(item) {
        const list = [...this.state.channels]
        list.push(item)
        if (!this.state.token) {
            setChannels(list)
        } else {
            //  登录的情况
            const res = await setMyChannels(item)
            console.log(res);
        }
        this.setState({
            channels: list
        })
    }
}